<template>
  <iLayout left>
    <section slot="title">工程实时数据</section>
    <section slot="left">
      <iProTree ref="proTree" :nodeClick="nodeClick"></iProTree>
    </section>
    <section slot="right" class="main">
      <section class="tcs-list" v-if="tcs.length > 0">
        <section class="tcs-body">
          <section class="tcs-item" v-for="tcs in tcs" :key="tcs.id" @click="tcsClick(tcs.id)">{{ tcs.name }}</section>
        </section>
      </section>
      <section class="unit-tab">
        <el-tabs type="border-card" stretch v-model="active.unittype" @tab-click="tabClick">
          <el-tab-pane :label="unittype.name" v-for="unittype in $store.state.unit" :key="unittype.type" @click="getUnitData(unittype.type)">
            <el-collapse v-model="active.unitlist" @change="unitOpenStateChange">
              <el-collapse-item :name="unit.id" v-for="unit in unit" :key="unit.id">
                <section slot="title" class="collapse-title">
                  <h3>
                    <i style="font-size: 1rem"></i>&emsp;{{ unit.name }}
                    <!-- <i :class="$store.state.unit.filter(item => item.type === unit.type)[0].icon" style="font-size: 1rem"></i>&emsp;{{ unit.name }} -->
                  </h3>
                  <section style="white-space: nowrap; overflow: hidden">
                    <el-tooltip content="图表数据" placement="top">
                      <el-button type="primary" size="mini" circle icon="el-icon-data-line" @click.stop="showDetail(unit)"> </el-button>
                    </el-tooltip>
                    <el-tooltip content="下载报表" placement="top">
                      <el-button type="primary" size="mini" circle icon="el-icon-download" @click.stop="downloadFile(unit)"> </el-button>
                    </el-tooltip>
                  </section>
                </section>
                <LogData v-if="unit.children.length > 0" :data="unit.children" :mode="unit.mode" :type="unit.type"></LogData>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
        </el-tabs>
      </section>
    </section>
    <section v-show="visible.log">
      <el-dialog :title="dialog.title" :visible.sync="visible.log" width="80%" :fullscreen="true" :show-close="false" :destroy-on-close="true" @close="visible.log = false" @open="logChartOpenFun">
        <LogChart ref="logChartRef" :data="dialog.logData"></LogChart>
        <div class="exitChartBox">
          <el-button type="info" @click="visible.log = false">关闭图表</el-button>
        </div>
      </el-dialog>
    </section>
  </iLayout>
</template>

<script>
import LogChart from './components/log_chart.vue'
import LogData from './components/log_data.vue'
import api from '../../api/private/project_data'
import setting from '../../setting'
import * as auth from '../../utils/auth'
export default {
  name: 'ProjectData',
  components: {
    LogChart,
    LogData
  },
  data: () => ({
    status: {
      tree: false
    },
    tcs: [],
    tree: [],
    unit: [],
    //  当前选中的隧洞对象
    active: {
      hole: {},
      tcs: '',
      unittype: '',
      unitlist: []
    },
    visible: {
      log: false
    },
    dialog: {
      title: '',
      logData: {}
    }
  }),
  mounted() {
    // this.$nextTick(item => {
    //   this.getProjectTree(this.$store.state.project_id)
    // })
    // this.$ebs.$on('project_change', projectId => {
    //   this.getProjectTree(projectId)
    // })
    // 初始化断面
    this.$ebs.$on('project_change', this.nullSectionData)
    let defaultTunnel = this.$refs.proTree.defaultTunnel
    if (defaultTunnel) {
      this.nodeClick(defaultTunnel)
    } else {
      this.nullSectionData()
    }
  },
  methods: {
    nullSectionData() {
      this.tcs = []
      this.unit = []
    },
    async getProjectTree(projectId) {
      if (this.status.tree) return
      else this.status.tree = true
      const data = await api.getProjectTree({ projectId: projectId ? projectId : this.$store.state.project_id })
      if (data.code === 0) {
        this.tree = data.data
        this.status.tree = false
      } else {
        this.$msg.error(data.msg)
        this.status.tree = false
      }
    },
    async getUnit() {
      // const data = await api.
    },
    //  点击三级树节点获取所有断面信息
    nodeClick(data, node) {
      if (data.type === 2) {
        this.active.hole = data
        this.getTCSData()
      }
    },
    async getTCSData() {
      const data = await api.getTCSData({ tunnelId: this.active.hole.id })
      if (data.code === 0) {
        this.tcs = data.data
      }
    },
    tcsClick(data) {
      this.active.tcs = data
      this.active.unittype = (0).toString()
      this.active.unitlist = []
      this.getUnitData()
    },
    tabClick(data) {
      this.active.unittype = data.paneName
      this.active.unitlist = []
      this.getUnitData()
    },
    async getUnitData() {
      if (this.active.tcs === '' || this.active.unittype === '') return
      const data = await api.getUnitData({ tcsId: this.active.tcs, type: this.active.unittype })
      if (data.code === 0) {
        data.data.forEach(item => {
          item.loaded = false
        })
        this.unit = data.data
      } else {
        this.$msg.error(`断面下单元信息获取失败，${data.msg}`)
      }
    },
    unitOpenStateChange(ids) {
      ids.forEach(item => {
        const index = this.unit.findIndex(unit => unit.id === item)
        if (!this.unit[index].loaded) {
          this.getUnitLogData(this.unit[index].id)
        }
      })
    },
    async getUnitLogData(elementId) {
      const data = await api.getUnitLogData({ elementId })
      if (data.code === 0) {
        const index = this.unit.findIndex(item => item.id === elementId)
        this.unit[index].loaded = true
        this.unit[index].children = data.data instanceof Array ? data.data : []
      } else {
        const index = this.unit.findIndex(item => item.id === elementId)
        this.$msg.error(`${this.unit[index].name} 单元下点信息获取失败，${data.msg}`)
      }
    },
    showDetail(data) {
      this.dialog.title = data.name
      window.sessionStorage.setItem('chartOfElement', JSON.stringify(data))
      this.dialog.logData = data
      // this.$router.push('/project_data_chart')
      this.visible.log = true
    },
    downloadFile(data) {
      let a = document.createElement('a')
      a.id = 'download'
      a.href = `${process.env.VUE_APP_API_URL}${process.env.VUE_APP_API_ROOT}/jklc/pointtRecord/exportMonitoringRecordByElementId?elementId=${data.id}&${setting.app_token_key}=${auth.getToken()}`
      a.target = '__blank'
      a.click()
    },
    logChartOpenFun() {
      this.$nextTick(item => {
        this.$refs.logChartRef.init()
      })
    }
  },
  destroyed() {
    // this.$ebs.$off('project_change')
    this.$ebs.$off('project_change', this.nullSectionData)
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;

  .tcs-list {
    animation: slideInLeft 0.25s linear;
    width: 13rem;
    height: 100%;
    position: relative;
    margin-right: 0.5rem;
    border-right: 0.15rem dashed rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 0 0.5rem 0 0;

    .tcs-body {
      width: 100%;
      height: 100%;
      overflow-y: auto;

      .tcs-item {
        box-sizing: border-box;
        height: 3rem;
        padding: 0 0.5rem;
        margin: 0.1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 0.25rem;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
          box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2), 0 -0.05rem 0.1rem rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .unit-tab {
    flex: 1;
    height: 100%;
    overflow: hidden;

    .el-tabs {
      box-sizing: border-box;
      height: 100%;
      overflow-y: auto;
    }

    .collapse-title {
      padding-right: 1%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.exitChartBox {
  position: fixed;
  right: 3%;
  top: 10px;
  z-index: 99;
}

@keyframes slideInLeft {
  from {
    left: -13rem;
  }
  to {
    left: 0;
  }
}
</style>
